<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Web Services Test</title>

        <!-- include the jx delicious skin -->
        <link rel="stylesheet" href="jxLib/themes/delicious/jxtheme.css" type="text/css" media="screen" charset="utf-8">
        <!-- IE specific style sheets -->
        <!--[if LTE IE 6]>
        <link rel="stylesheet" href="jxLib/themes/delicious/ie6.css" type="text/css" media="screen" charset="utf-8">
        <![endif]-->
        <!--[if IE 7]>
        <link rel="stylesheet" href="jxLib/themes/delicious/ie7.css" type="text/css" media="screen" charset="utf-8">
        <![endif]-->

        <!-- this prevents scrollbars from appearing on the page -->
        <style type="text/css">
            body {
                overflow: hidden;
            }
        </style>  
        <script src="jxLib/jxlib.uncompressed.js" type="text/javascript" charset="utf-8"></script>

        <script type='text/javascript'>
            //var xmlhttp;
            var jsonRequest;
            var htmlRequest;
            
            var userText;
            var passwordText;
            var debugBoolean;
            var addressText;
            var messageText;
            var responseTextField;
            var responseTextContent;
            var geocoderTextField;
            
            var serverAddressText;
            var map ;
            var geocoder;
            window.addEvent('load', function() {
                //xmlhttp = new XMLHttpRequest();
                new Jx.Layout('thePage');

                var mainPanel = new Jx.Panel({
                    id: 'Main',
                    hideTitle: true                    
                });
                
                mainPanel.addTo('thePage');
                //new Jx.Layout('Main', {right: 250, bottom: 30});
                new Jx.Layout('Main');                
                
    
               
                var tabContainer = new Jx.Panel({
                    id: 'TabContainer',
                    parent: 'Main',                   
                    hideTitle: true                    
                });
                new Jx.Layout('TabContainer', {
                    //top:50,
                    
                    right:50,
                    left: 50
                });
                //add options tab
                tabBox = new Jx.TabBox({id: 'TabBox',parent: 'TabContainer'});
                var optionsContent = new Jx.Panel({
                    id: 'OptionsContent',
                    hideTitle: true                    
                });
                
                var optionsTab = new Jx.Tab({
                    //visible: false,
                    //enabled: false,
                    close : false,
                    label: 'Options',
                    content: optionsContent
                   
                });              
                
                
                // Form Of options tab
               
                optionsForm = new Jx.Form({
                    name: 'optionsForm',
                    formClass: 'jxFormInline'
                }).addTo(optionsContent); 
                

                var optionsFieldSet = new Jx.Fieldset({
                    legend: 'WebService Options',
                    id: 'optionsFieldSet',
                    fieldsetClass: 'jxFormInlineblock'
                }).addTo(optionsForm);
  
                serverAddressText= new Jx.Field.Text({
                    id: 'ServerAddress',
                    name: 'ServerAddress',
                    label: 'Server Address',
                    value: 'http://localhost:8080/WebServicesTest/rest/user',
                    tag: 'Set The Address of the Web Service here',
                    size: 500,
                    required: true
                }).addTo(optionsFieldSet);             
                
                
                //add User Info tab
                var userInfoContent = new Jx.Panel({
                    id: 'UserInfoContent',
                    hideTitle: true                    
                });
                var userInfoTab = new Jx.Tab({
                    //visible: false,
                    //enabled: false,
                    close : false,
                    label: 'User Information',
                    content: userInfoContent
                   
                });             
                tabBox.add(userInfoTab,optionsTab);   
                  

                
                // Form Of UserInfo tab
               
                var userInfoForm = new Jx.Form({
                    name: 'userInfoForm',
                    formClass: 'jxFormInline'
                }).addTo(userInfoContent);                
                

                var loginFieldSet = new Jx.Fieldset({
                    legend: 'Login Fields',
                    id: 'loginFieldSet',
                    fieldsetClass: 'jxFormInlineblock'
                }).addTo(userInfoForm);
  
                userText= new Jx.Field.Text({
                    id: 'User',
                    name: 'User',
                    label: 'User',
                    value: 'dsc110@gmail.com',
                    tag: 'Enter E-mail id here',                    
                    required: true
                }).addTo(loginFieldSet);
                passwordText=new Jx.Field.Password({
                    id: 'Password',
                    name: 'Password',
                    label: 'Password',
                    value: 'pass',
                    tag: 'Enter Password here',                    
                    required: true
                }).addTo(loginFieldSet);
                debugBoolean= new Jx.Field.Select({
                    id: 'Debug',
                    name: 'Debug',
                    label: 'Debug',
                    tag: 'Select true for calling database',
                    comboOpts: [{
                            value: 'true',
                            text: 'True',
                            selected: false
                        },{
                            value: 'false',
                            text: 'False',
                            selected: true
                        }]
                }).addTo(loginFieldSet);
                new Jx.Field.Button({
                    buttonOptions:{
                        label: 'Get Html',
                        onClick: function() {
                            console.log('Get Html');
                            addressText.field.value='Contacting Server For Html,only JSON data is parsed presently';
                            messageText.field.value='Contacting Server For Html,only JSON data is parsed presently';                            
                            sendRequest("HTML");
                        }
                    },
                    defaultAction: true
                }).addTo(loginFieldSet)
                new Jx.Field.Button({
                    buttonOptions:{
                        label: 'Get Json',
                        onClick: function() {
                            console.log('Get Json');
                            addressText.field.value='Contacting Server For Html';
                            messageText.field.value='Contacting Server For Html';
                            sendRequest("JSON");
                        }
                    },
                    defaultAction: true
                }).addTo(loginFieldSet)
                
                new Jx.Field.Button({
                    buttonOptions:{
                        label: 'Validate Form',
                        onClick: function() {
                            console.log('Get Json');
                            //addressText.field.value='Contacting Server';
                            //messageText.field.value='Contacting Server';
                            //addressText.setBusy(true);
                            messageText.setBusy(true);
                            responseTextField.setBusy(true);
                            if(validateEmail(userText.field.value)){
                                alert(" user name "+userText.field.value+" is valid")
                            }else{
                                alert(" user name "+userText.field.value+" is invalid")
                            }
                            if(validatePassword(passwordText.field.value)){
                                alert(" password "+passwordText.field.value+" is valid")
                            }else{
                                alert(" password "+passwordText.field.value+" is invalid")
                            }
                            messageText.setBusy(false);
                            responseTextField.setBusy(false);
                        }
                    },
                    defaultAction: true
                }).addTo(loginFieldSet)
                
                addressText=new Jx.Field.Textarea({
                    id: 'Address',
                    name: 'Address',
                    label: 'Address',
                    readonly: true,
                    rows: 6,
                    columns: 60,
                    tag: 'Address Of User From Server'
                }).addTo(loginFieldSet);
                messageText=new Jx.Field.Text({
                    id: 'Message',
                    name: 'Message',
                    label: 'Message From Server',
                    readonly: true,
                    rows: 2,
                    columns: 80,
                    tag: 'Message Returned From Server'
                }).addTo(loginFieldSet);
                
                var serverResponseForm = new Jx.Form({
                    id: 'serverResponseForm',
                    name: 'serverResponseForm',
                    formClass: 'jxFormInlineblock'
                }).addTo(userInfoContent); 
                new Jx.Layout('serverResponseForm', {
                    top:null,
                    right: null
                    
                });
                var serverResponseFiledSet = new Jx.Fieldset({
                    legend: 'Server Response',
                    id: 'serverResponseFiledSet',
                    fieldsetClass: 'jxFormInlineblock'
                }).addTo(serverResponseForm);
                responseTextField=new Jx.Field.Textarea({
                    id: 'Response',
                    name: 'Response',
                    label: 'WebServiceTest Response',
                    readonly: true,
                    rows: 6,
                    columns: 120                    
                    //tag: 'Response Recieved From Server'
                }).addTo(serverResponseFiledSet);          
                geocoderTextField=new Jx.Field.Textarea({
                    id: 'Geocoder',
                    name: 'Geocoder',
                    label: 'Geocoder Response',
                    readonly: true,
                    rows: 6,
                    columns: 120                    
                    //tag: 'Response Recieved From Server'
                }).addTo(serverResponseFiledSet); 
                
                var mapPanel=new Jx.Panel({
                    id: 'mapPanel',                   
                    content:'test map content'
                }).addTo(mainPanel);  // userInfoContent or serverResponseForm //mainPanel?
                new Jx.Layout('mapPanel', {
                    bottom:null,
                    top: 350,
                    //left: null,
                    left:700,
                    height: 400,
                    width: 400
                });
                
                mainPanel.addTo('thePage');
                
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDRAyUUqkKd76LbGv9oxhb0s8FzEftBOMU&sensor=false&callback=initializeMap";
                document.body.appendChild(script);

                $('thePage').resize();

            });
            function sendRequest(requestType){                    
                addressText.setBusy(true);
                messageText.setBusy(true);
                responseTextField.setBusy(true);
                if(validateEmail(userText.field.value)){
                    //alert(" user name "+userText.field.value+" is valid");
                }else{
                    alert(" user name "+userText.field.value+" is invalid");
                    addressText.setBusy(false);
                    messageText.setBusy(false);
                    responseTextField.setBusy(false);
                    return;
                }
                if(validatePassword(passwordText.field.value)){
                    //alert(" password "+passwordText.field.value+" is valid");
                }else{
                    alert(" password "+passwordText.field.value+" is invalid");
                    addressText.setBusy(false);
                    messageText.setBusy(false);
                    responseTextField.setBusy(false);
                    return;
                }
                if(requestType==="JSON"){
                    jsonRequest = new Request.JSON({
                        url: serverAddressText.field.value, 
                        method: 'get', 
                        //data: 'username='+userText.field.value+'&password='+passwordText.field.value+'&debug='+debugBoolean.field.value,
                        onSuccess: function(userreturn,responseText){
                            //this serves for bebugging this data should allways appear, the server date (for example, 'Thu, 26 Feb 2009 20:26:06 GMT')
                            //console.log('got server header date :'+this.getHeader('Date')); 
                            responseTextContent=responseText;
                            console.log('got response text :'+responseText);
                            console.log('response parsed as json below :');
                            console.log(userreturn);

                            console.log('parsed json value : username : '+userreturn.username+' password : '+userreturn.password+' address :'+userreturn.address);
                            addressText.field.value=userreturn.address;                            
                            messageText.field.value=userreturn.message;
                            responseTextField.field.value=responseText;
                                  
                            addressText.setBusy(false);
                            messageText.setBusy(false);
                            responseTextField.setBusy(false);
                                    
                            codeAddress(userreturn.address,userreturn.username);
                            
                        },
                        onFailure: function(xhr){
                            responseTextContent=xhr.responseText;
                            console.log('got response text :'+responseTextContent);
                            addressText.field.value='Failed To Get Response';                            
                            messageText.field.value='Failed To Get Response';
                            responseTextField.field.value=responseTextContent;
                                    
                            addressText.setBusy(false);
                            messageText.setBusy(false);
                            responseTextField.setBusy(false);
                        }
                    
                    });
                    console.log("trying request url :"+jsonRequest.options.url+" data :"+jsonRequest.options.data);
                    //here the json request is applied for through the browser version of xmlhttprequest expected i.e>6.0 
                    jsonRequest.send('username='+userText.field.value+'&password='+passwordText.field.value+'&debug='+debugBoolean.field.value);
                }else{
                    htmlRequest = new Request.HTML({
                        url: serverAddressText.field.value, 
                        method: 'get', 
                        //data: 'username='+userText.field.value+'&password='+passwordText.field.value+'&debug='+debugBoolean.field.value,
                        //onSuccess: function(userreturn,responseText){
                        onSuccess: function(responseTree, responseElements, responseText, responseJavaScript){
                            //this serves for bebugging this data should allways appear, the server date (for example, 'Thu, 26 Feb 2009 20:26:06 GMT')
                            //console.log('got server header date :'+this.getHeader('Date')); 
                            responseTextContent=responseText;
                            console.log('got response text :'+responseText);
                            console.log('response parsed as html below :');
                            console.log(responseTree);

                            //console.log('parsed html value : username : '+responseTree.username+' password : '+responseTree.password+' address :'+userreturn.address);
                            //addressText.field.value=userreturn.address;                            
                            //messageText.field.value=userreturn.message;
                            responseTextField.field.value=responseText;
                                  
                            addressText.setBusy(false);
                            messageText.setBusy(false);
                            responseTextField.setBusy(false);
                                    
                            //codeAddress(userreturn.address,userreturn.username);
                            
                        },
                        onFailure: function(xhr){
                            responseTextContent=xhr.responseText;
                            console.log('got response text :'+responseTextContent);
                            //addressText.field.value='Failed To Get Response';                            
                            //messageText.field.value='Failed To Get Response';
                            responseTextField.field.value=responseTextContent;
                                    
                            addressText.setBusy(false);
                            messageText.setBusy(false);
                            responseTextField.setBusy(false);
                        }
                    
                    });
                    console.log("trying request url :"+htmlRequest.options.url+" data :"+htmlRequest.options.data);
                    //here the json request is applied for through the browser version of xmlhttprequest expected i.e>6.0 
                    htmlRequest.send('username='+userText.field.value+'&password='+passwordText.field.value+'&debug='+debugBoolean.field.value);
                            
                }                            
            }
                
            function validatePassword(pass) { 
                //return !(!pass || 0 === pass.length);
                return !(!pass || /^\s*$/.test(pass));
                
            }            
            function validateEmail(email) { 
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            } 
            function initializeMap() {
                geocoder = new google.maps.Geocoder();
                var myOptions = {
                    zoom: 12,                  
                    center: new google.maps.LatLng(12.970214, 77.56029),//initially centred to bangalore
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("mapPanel"), myOptions);
            }
            function codeAddress(address,username) {
                //var address = document.getElementById("address").value;
                console.log('trying geocode for :'+address+' user :'+username);
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            title: username,
                            clickable: true,
                            icon: 'home.png',
                            position: results[0].geometry.location
                        });
                        geocoderTextField.field.value=' Geocoder Returned :'+status +' for address :'+address;
                    } else {
                        //alert("Geocode was not successful for the following reason: " + status);
                        geocoderTextField.field.value=' Geocoder Returned :'+status +' for address :'+address;
                    }
                })
            }
        </script>

    </head>
    <body>
        <div id="thePage">


        </div>

    </body>
</html>